<script setup lang="ts">
//引入类型
import { IGetCategoryList } from '../type'
import { ref, reactive } from 'vue'

const props = defineProps({
    shopitem: {
        type: Object as () => IGetCategoryList,
        default: () => {},
    },
    current: {
        type: Number,
        default: 0,
    },
})
const sellOffVisible = ref(false)
const violationTypeMap = {
    PROHIBITED: '违禁品',
    COUNTERFEIT: '假冒伪劣',
    EXCESSIVE_PLATFORM_INTERVENTION: '平台介入率太高',
    TITLE_IRREGULARITY: '标题有问题',
    OTHER: '其他',
}
// 违规信息
const explainData = reactive({ rummager: '', violationType: '', violationExplain: '', violationEvidence: [] as string[], examineDateTime: '' })
// console.log(props.shopitem)

/**
 * 编辑商品
 */
const handleEditShop = () => {
    console.log('编辑商品', props.shopitem)
    if (props.shopitem.sellType === 'CONSIGNMENT') {
        return uni.showToast({
            title: '代销商品请前往商家端后台编辑',
            icon: 'none',
        })
    }

    //跳转到上架商品页面
    uni.navigateTo({
        url: `/basePackage/pages/shopsSystemone/components/GoodsOnShelf?shopid=${props.shopitem.shopId}&id=${props.shopitem.id}`,
    })
}
const handlePopup = () => {
    const productViolation = props.shopitem.extra?.productViolation || {}
    Object.keys(explainData).forEach((key) => {
        const explainDataKey = key as keyof typeof explainData
        if (explainDataKey === 'violationEvidence') {
            explainData.violationEvidence = productViolation?.violationEvidence ? productViolation.violationEvidence.split(',') : []
        } else if (explainDataKey === 'violationType') {
            const list: string[] = []
            productViolation?.violationType?.forEach((item: keyof typeof violationTypeMap) => {
                list.push(violationTypeMap[item])
            })
            explainData.violationType = list.join(',')
        } else {
            explainData[key] = productViolation?.[key] || ''
        }
    })
    sellOffVisible.value = true
}
</script>

<template>
    <view class="item">
        <view class="item__left">
            <u-image class="item__img" width="206rpx" height="206rpx" :src="props.shopitem.pic"></u-image>
        </view>
        <view class="item__right">
            <view class="item__title">{{ props.shopitem.name }}</view>
            <view class="item__price">¥{{ (Number(props.shopitem.storageSkus[0].salePrice) / 10000).toFixed(2) }}</view>
            <view class="item__stock">
                <text>库存：{{ props.shopitem.storageSkus[0].stock }}</text>
                <!-- <template v-if="props.current !== 2">
                    <view class="item__stock--edit" @click="handleEditShop">
                        <text>编辑商品</text>
                        <u-icon name="edit-pen-fill" color="rgb(71, 85, 233)" size="30"></u-icon>
                    </view>
                </template> -->
                <template v-if="props.current === 2">
                    <view class="item__stock--edit" @click="handlePopup">
                        <text>违规原因</text>
                    </view>
                </template>
            </view>
        </view>
        <u-popup v-model="sellOffVisible" mode="bottom">
            <view style="line-height: 30px">
                <view>检查员：{{ explainData.rummager }}</view>
                <view>检查时间：{{ explainData.examineDateTime }}</view>
                <view>类型：{{ explainData.violationType }}</view>
                <view>原因：{{ explainData.violationExplain }}</view>
                <view>
                    相关证据：
                    <image
                        v-for="(pic, picIndex) in explainData.violationEvidence"
                        :key="picIndex"
                        :src="pic"
                        style="width: 150rpx; height: 150rpx; margin-right: 10rpx"
                    />
                </view>
            </view>
        </u-popup>
    </view>
</template>

<style lang="scss" scoped>
@include b(item) {
    flex: 1;
    height: 266rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 1);
    color: #101010;
    font-size: 28rpx;
    padding: 30rpx 0 30rpx 30rpx;
    display: flex;
    margin-bottom: 20rpx;
    @include e(left) {
        margin-right: 28rpx;
    }
    @include e(right) {
        flex: 1;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
    }
    @include e(title) {
        color: rgba(51, 51, 51, 1);
        height: 70rpx;
        font-size: 26rpx;
        font-weight: 700;
        //固定两行 超出显示省略号
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    @include e(price) {
        color: rgba(71, 85, 233, 1);
        font-size: 26rpx;
        // margin-bottom: 70rpx;
        margin: 20rpx 0 50rpx 0;
    }
    @include e(stock) {
        color: rgba(153, 153, 153, 1);
        font-size: 24rpx;
        display: flex;
        justify-content: space-between;
        @include m(edit) {
            margin-right: 20rpx;
            color: rgb(71, 85, 233);
        }
    }
}
</style>
